<template lang="pug">
  .toolsbar(v-if="getMenuList", :class="{'animated bounceInRight': getMenuList}")
    .item.hand(
      :key="index",
      v-if="item.display",
      :style="getBgColorStyle",
      v-for="(item, index) in getMenuList",
      @click="handleMenu(item)")
      span.num(v-if="item.type_id == 'praise'", :class="{'animated fadeOutUp active': showNum}") +1
      i.iconfont(v-show="item.isActive", :class="item.active_icon", :style="getColorStyle")
      i.iconfont(v-show="!item.isActive", :class="item.icon", :style="getColorStyle")
</template>

<script>
import themeMixin from '@/mixins/theme'
import {
  filterMenu,
  handleSystemMenu
} from '@/utils/menu'

export default {
  mixins: [themeMixin],
  data() {
    return {
      showNum: false,
      toolsMenu: []
    }
  },
  computed: {
    getMenuList() {
      if(this.toolsMenu.length) {
        return this.toolsMenu
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(async () => {
        const menu  =  await filterMenu(this.$CONFIG.toolsBarMenuE)
        this.toolsMenu = menu
      })
    })

    this.$vgo.on('toggle:minimap-icon', (flag) => {
      this.toolsMenu.map((item, idx) => {
        if(item.type_id == 'minimap') {
          item.display = flag
        }
      })
    })
  },
  methods: {
    handleMenu(item) {
      // 收藏按钮需要先登录才能切换状态
      let praiseCK = this.$AUTH.getCookie('praisecount')
      if(item.type_id == 'collect') {
        if(this.$AUTH.checkLogin()) {
          item.isActive = !item.isActive
        }
      } else {
        item.isActive = !item.isActive
      }

      if(item.type_id == 'praise' && !praiseCK && this.$AUTH.checkLogin()) {
        this.showNum = true
        setTimeout(() => {
          this.showNum = false
        }, 1000)
      }

      handleSystemMenu(item)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/color.styl'
.toolsbar
  position: absolute
  right: 20px
  bottom: 240px
  z-index: 10
  .item
    position: relative
    width: 24px
    height: 24px
    line-height: 24px
    padding: 10px
    margin-bottom: 15px
    border-radius: 50%
    background-color: rgba($theme4-color, .4)
    &.active
      background-color: rgba($theme4-color, .8)
    .num
      position: absolute
      top: 0
      font-size: 20px
      color: $theme4-color
      opacity: 0
      &.active
        opacity: 1
    i
      font-size: 24px
      color: $white
    .icon-danmu2, .icon-danmu11
      margin-left: -15px
      font-size: 30px
    .icon-biyan, .icon-buxuanzhuan
      margin-left: -10px
    .icon-vr-outline
      font-size: 30px
      margin-left: -2px
    .icon-heart-red
      color: $success
</style>
